<template>
  <div>
    <h3>银行卡余额：{{ money }}</h3>
    <button @click="salary(3000)">发工资啦，我的工资是3000</button><br/><br/>
    <button @click="salary(-2800)">给喜欢的女主播刷了火箭-2800</button><br/><br/>
    <button @click="salary(10000)">送外卖赚了10000</button><br/><br/>
    <button @click="salary(-18000)">给暗恋的女生买了爱马仕-18000</button><br/><br/>
    <button @click="salary(8000)">晚上去做代驾赚了8000</button><br/><br/>
    <button @click="salary(-100)">买泡面100</button><br/><br/>
    <button @click="salary(-50)">买挂逼水50</button><br/><br/>

    <!-- <div>{{teacher.name}}</div>
    <div>{{teacher.age}}</div>
    <div>{{teacher.salary}}</div>
    <button @click="timeFly">过了一年</button> -->
  </div>
</template>

<script>
export default {
  // 组件的配置项中，除了data是函数，其他一律是对象
  data () {
    return {
      // 需求：只要我卡的钱，变化了，你就发个短信通知一下我~
      money: 100,

      teacher:{
        name:"harry",
        age:28,
        salary:3000
      }

    }
  },
  methods: {
     //工资函数
    salary(num) {
        this.money += num
    },
    timeFly() {
      this.teacher.age += 1
      this.teacher.salary += 500
    }
  },
  //除了data以外所有的配置项都是属性都用：
  watch: {
    //监听money的变化，只要money一旦发生改变，就会调用下面的函数
    "money" (newVal,oldVal) {
      // console.log(newVal,oldVal);

      alert("余额为"+newVal+'原来有'+oldVal)
    },

    //要监听复杂数据类型的话，要准确到属性
    "teacher" (newVal,oldVal) {
      if(newVal === 40 ) {
        alert('您该退休了'+"您的年纪是"+this.teacher.age+"您的工资是"+this.teacher.salary)
      }
    }

  }
}
</script>

<style>

</style>